<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div
      ref="threeref"
      style="width: 100%; height: 100%; position: relative"
    ></div>
    <div
      id="test-layer"
      :style="{
        left: layerInfo.screen_x + 'px',
        top: layerInfo.screen_y + 'px',
      }"
    ></div>
  </div>
</template>
<script setup>
import { ref, onMounted, inject } from "vue";

// 引擎装配的JSON数据
import ENGINE_ASSEMBLY_JSON from "../json/ENGINE ASSEMBL.json";
import pointData from "../json/测点数据.json";
let layerInfo = ref({ screen_x: 0, screen_y: 0 });

const modelInfo = inject("3d-info");
let threeref = ref(null);
import { createThreeFramework } from "../js/index.js";
import { domMouseDrag } from "../../tool.js";



onMounted(async () => {
  domMouseDrag(document.getElementById("test-layer"), threeref.value, (val) => {
    // layerInfo.value.screen_x = val.left;
    // layerInfo.value.screen_y = val.top;
    modelInfo.renderPointToLines([
        {
          index: 0,
          mouse: {x:val.centerX, y:val.centerY}
        }
      ]);

  })
  createThreeFramework(modelInfo, threeref);

  // modelInfo.renderModels(ENGINE_ASSEMBLY_JSON);

  // console.log('modelInfo',modelInfo)
  pointData.data[0].color = "0xffFF00";
  // modelInfo.pointAttrMethods.setUpPoints(pointData.data)
  modelInfo.handleEventListener(true);
});
</script>
<style scoped>
/* #test-layer {
  width: 100px;
  height: 100px;
  background-color: wheat;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
} */
</style>
